<template>
	<div id="page" style="width: 100%; margin-bottom: 4vh">
		<div style="width: 100%">
			<el-row
				class="hvr-forward"
				style="
					display: flex;
					align-items: center;
					border: 1px solid rgba(255, 99, 71, 0.1);
					box-shadow: 1px 0 10px rgba(255, 99, 71, 0.3);
				"
			>
				<el-col :span="3">
					<div>
						<el-image
							fit="fill"
							:src="blogData.cover"
							style="height: 21vh; width: 100%"
						></el-image>
					</div>
				</el-col>
				<el-col :span="21">
					<div>
						<el-card
							shadow="never"
							style="
								height: 21vh;
								width: 100%;
								position: relative;
							"
							@click="pushBlog(blogData.id, blogData.uploader)"
						>
							<div style="display: flex; justify-content: center">
								<el-text
									type="primary"
									style="font-weight: bold; font-size: 20px"
								>
									{{ blogData.title }}
								</el-text>
							</div>
							<div style="margin: 4vh 2vw 1.5vh 2vw">
								<el-text :truncated="true">
									{{ contentString }}
								</el-text>
							</div>
							<div
								style="
									margin: 4.5vh 2vw 1vh 2vw;
									display: flex;
									justify-content: space-between;
									align-items: center;
								"
							>
								<div>
									<el-text type="danger">
										作者：{{ blogData.uploader }}
									</el-text>
								</div>
								<div>
									<el-text type="success">
										发布日期：{{
											dateStore.getNowDate(
												blogData.uploaddate
											)
										}}
									</el-text>
								</div>
							</div>
							<div
								style="position: absolute; right: 2%; top: 45%"
							>
								<el-icon>
									<ArrowRight />
								</el-icon>
							</div>
						</el-card>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue';
import { onBeforeMount, toRefs, watch, watchEffect } from 'vue';
import { blog } from '../store/blog.js';
import { date } from '../store/date.js';
import { useRouter } from 'vue-router';
const router = useRouter();
const blogStore = blog();
const dateStore = date();
const props = defineProps({
	blogData: {
		default: null,
	},
});
const { blogData } = toRefs(props);

const contentString = ref('');

const pushBlog = (blogId, uploader) => {
	router.push({ path: '/blogPage', query: { blogId, uploader } });
};

onBeforeMount(() => {
	contentString.value = blogStore.stripHtmlTags(blogData.value.content);
});
</script>

<style scoped>
.el-card {
	border: none;
}
</style>
